<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>美食今日推荐页面</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#div0{
				width: 300px;
				height: 400px;
				border: 1px solid #63A7D6;
				/*margin: 0 auto;--此为居中显示*/
				margin: 50px;
				border-radius: 15px;
				position: relative;
			}
			h3{
				padding-top: 15px;
				padding-left: 15px;
			}
			span{
				color: red;
				font-weight: bold;
			}
			.p1{
				float: right;
				position: absolute;
				top: 25px;
				left: 250px;
			}
			.p2{
				float: left;
				position: absolute;
				top: 45px;
				left:80px;
			}
			.div2{
				float: left;
				padding-left: 20px;
				padding-top: 20px;
			}
			.div2 li{
				padding-bottom: 10px;
			}
			.div3{
				float: right;
				padding-right: 30px;
				padding-top: 25px;
			}
			.div3 li{
				padding-bottom:15px ;
			}
			.div3 li a{
				text-decoration: none;
			}
			.div3 li a:hover{
				color: red;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div id="div0">
			<div class="div1">
				<h3><span>SHOP</span>今日推荐</h3>
				<img src="../img/more.gif" class="p1"/>
				<img src="../img/shen.png" class="p2"/>
			</div>
			<div class="div2">
				<ul type="none">
					<li><img src="../img/img9.gif"/></li>
					<li><img src="../img/img7.gif"/></li>
					<li><img src="../img/img8.gif"/></li>
					<li><img src="../img/img7.gif"/></li>
				</ul>
			</div>
			
		<div class="div3">
			<ul type="none">
				<li>
					<a href="#">汉来国际美食百货</a>
					<p>口味：创意中餐</p>
					<p>区域：朝阳/CBD</p>
				</li>
				<li>
					<a href="#">汉来国际美食百货</a>
					<p>口味：创意中餐</p>
					<p>区域：朝阳/CBD</p>
				</li>
				<li>
					<a href="#">汉来国际美食百货</a>
					<p>口味：创意中餐</p>
					<p>区域：朝阳/CBD</p>
				</li>
				<li>
					<a href="#">汉来国际美食百货</a>
					<p>口味：创意中餐</p>
					<p>区域：朝阳/CBD</p>
				</li>
			</ul>
		</div>
		</div>
	</body>
</html>
